<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" >

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">


</head>

<body class="hold-transition light-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

          <div class="col-sm-6">
            <h1 class="m-0">仪表盘</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">仪表盘</li>
            </ol>
          </div>

        </div>

      </div>

    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="form-group col-lg-2" style="margin-left: 150px;">
              <label for="product_id">下拉查看产品年能耗</label>
              <select class="form-control" id="product_id" name="product_id" style="width: 223px;">
                <option>下拉查看的产品年能耗</option>
              </select>
            </div>
            <div class="form-group col-lg-2" style="margin-left: 150px;">
              <label for="product_id">下拉查看产品当前年每月能耗</label>
              <select class="form-control" id="year_id" name="year_id" style="width: 223px;">
                <option>下拉查看产品年每月能耗</option>
              </select>
            </div>

            <div id="main" style="width: 1800px;height:800px;"></div>
            <!-- 卡片1 -->
<!--            <div class="card">-->

<!--              <div class="card-header border-0">-->
<!--                <div class="d-flex justify-content-between">-->
<!--                  <h3 class="card-title">Online Store Visitors</h3>-->
<!--                  &lt;!&ndash; <a href="javascript:void(0);">View Report</a> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->

<!--              <div class="card-body">-->

<!--                <div class="d-flex">-->

<!--                  <p class="d-flex flex-column">-->
<!--                    <span class="text-bold text-lg">820</span>-->
<!--                    <span>Visitors Over Time</span>-->
<!--                  </p>-->

<!--                  <p class="ml-auto d-flex flex-column text-right">-->
<!--                                            <span class="text-success">-->
<!--                                                <i class="fas fa-arrow-up"></i> 12.5%-->
<!--                                            </span>-->
<!--                    <span class="text-muted">Since last week</span>-->
<!--                  </p>-->

<!--                </div>-->

<!--                <div class="position-relative mb-4">-->
<!--                  <canvas id="visitors-chart" height="200"></canvas>-->
<!--                </div>-->

<!--                <div class="d-flex flex-row justify-content-end">-->
<!--                                        <span class="mr-2">-->
<!--                                            <i class="fas fa-square text-primary"></i> This Week-->
<!--                                        </span>-->

<!--                  <span>-->
<!--                                            <i class="fas fa-square text-gray"></i> Last Week-->
<!--                                        </span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 卡片2 &ndash;&gt;-->
<!--            <div class="card">-->
<!--              <div class="card-header border-0">-->
<!--                <h3 class="card-title">Products</h3>-->
<!--                <div class="card-tools">-->
<!--                  <a href="#" class="btn btn-tool btn-sm">-->
<!--                    <i class="fas fa-download"></i>-->
<!--                  </a>-->
<!--                  <a href="#" class="btn btn-tool btn-sm">-->
<!--                    <i class="fas fa-bars"></i>-->
<!--                  </a>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="card-body table-responsive p-0">-->
<!--                <table class="table table-striped table-valign-middle">-->
<!--                  <thead>-->
<!--                  <tr>-->
<!--                    <th>Product</th>-->
<!--                    <th>Price</th>-->
<!--                    <th>Sales</th>-->
<!--                    <th>More</th>-->
<!--                  </tr>-->
<!--                  </thead>-->
<!--                  <tbody>-->
<!--                  <tr>-->
<!--                    <td>-->
<!--                      <img src="dist/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 mr-2"> Some-->
<!--                      Product-->
<!--                    </td>-->
<!--                    <td>$13 USD</td>-->
<!--                    <td>-->
<!--                      <small class="text-success mr-1">-->
<!--                        <i class="fas fa-arrow-up"></i>-->
<!--                        12%-->
<!--                      </small> 12,000 Sold-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      <a href="#" class="text-muted">-->
<!--                        <i class="fas fa-search"></i>-->
<!--                      </a>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td>-->
<!--                      <img src="dist/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 mr-2">-->
<!--                      Another Product-->
<!--                    </td>-->
<!--                    <td>$29 USD</td>-->
<!--                    <td>-->
<!--                      <small class="text-warning mr-1">-->
<!--                        <i class="fas fa-arrow-down"></i>-->
<!--                        0.5%-->
<!--                      </small> 123,234 Sold-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      <a href="#" class="text-muted">-->
<!--                        <i class="fas fa-search"></i>-->
<!--                      </a>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td>-->
<!--                      <img src="dist/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 mr-2">-->
<!--                      Amazing Product-->
<!--                    </td>-->
<!--                    <td>$1,230 USD</td>-->
<!--                    <td>-->
<!--                      <small class="text-danger mr-1">-->
<!--                        <i class="fas fa-arrow-down"></i>-->
<!--                        3%-->
<!--                      </small> 198 Sold-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      <a href="#" class="text-muted">-->
<!--                        <i class="fas fa-search"></i>-->
<!--                      </a>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  <tr>-->
<!--                    <td>-->
<!--                      <img src="dist/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 mr-2">-->
<!--                      Perfect Item-->
<!--                      <span class="badge bg-danger">NEW</span>-->
<!--                    </td>-->
<!--                    <td>$199 USD</td>-->
<!--                    <td>-->
<!--                      <small class="text-success mr-1">-->
<!--                        <i class="fas fa-arrow-up"></i>-->
<!--                        63%-->
<!--                      </small> 87 Sold-->
<!--                    </td>-->
<!--                    <td>-->
<!--                      <a href="#" class="text-muted">-->
<!--                        <i class="fas fa-search"></i>-->
<!--                      </a>-->
<!--                    </td>-->
<!--                  </tr>-->
<!--                  </tbody>-->
<!--                </table>-->
<!--              </div>-->
            </div>

          </div>
          <!-- /.col-md-6 -->
          <div class="col-lg-12">
<!--            <div class="form-group col-lg-2" style="margin-left: 150px;" th:if="${#httpSession.getAttribute('role_id') ==1}">-->
<!--              <label for="product_year_id">请下拉选择你想看的产品年能耗</label>-->
<!--              <select class="form-control" id="product_year_id" name="product_year_id" style="width: 223px;">-->
<!--                <option>下拉请选择</option>-->
<!--              </select>-->
<!--            </div>-->
            <div id="main1" style="width: 1800px;height:800px;"></div>
<!--            <div class="card">-->
<!--              <div class="card-header border-0">-->
<!--                <div class="d-flex justify-content-between">-->
<!--                  <h3 class="card-title">Sales</h3>-->
<!--                  &lt;!&ndash; <a href="javascript:void(0);">View Report</a> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="card-body">-->
<!--                <div class="d-flex">-->
<!--                  <p class="d-flex flex-column">-->
<!--                    <span class="text-bold text-lg">$18,230.00</span>-->
<!--                    <span>Sales Over Time</span>-->
<!--                  </p>-->
<!--                  <p class="ml-auto d-flex flex-column text-right">-->
<!--                                            <span class="text-success">-->
<!--                                                <i class="fas fa-arrow-up"></i> 33.1%-->
<!--                                            </span>-->
<!--                    <span class="text-muted">Since last month</span>-->
<!--                  </p>-->
<!--                </div>-->
<!--                &lt;!&ndash; /.d-flex &ndash;&gt;-->

<!--                <div class="position-relative mb-4">-->
<!--                  <canvas id="sales-chart" height="200"></canvas>-->
<!--                </div>-->

<!--                <div class="d-flex flex-row justify-content-end">-->
<!--                                        <span class="mr-2">-->
<!--                                            <i class="fas fa-square text-primary"></i> This year-->
<!--                                        </span>-->

<!--                  <span>-->
<!--                                            <i class="fas fa-square text-gray"></i> Last year-->
<!--                                        </span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; /.card &ndash;&gt;-->

<!--            <div class="card">-->
<!--              <div class="card-header border-0">-->
<!--                <h3 class="card-title">Online Store Overview</h3>-->
<!--                <div class="card-tools">-->
<!--                  <a href="#" class="btn btn-sm btn-tool">-->
<!--                    <i class="fas fa-download"></i>-->
<!--                  </a>-->
<!--                  <a href="#" class="btn btn-sm btn-tool">-->
<!--                    <i class="fas fa-bars"></i>-->
<!--                  </a>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="card-body">-->
<!--                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">-->
<!--                  <p class="text-success text-xl">-->
<!--                    <i class="ion ion-ios-refresh-empty"></i>-->
<!--                  </p>-->
<!--                  <p class="d-flex flex-column text-right">-->
<!--                                            <span class="font-weight-bold">-->
<!--                                                <i class="ion ion-android-arrow-up text-success"></i> 12%-->
<!--                                            </span>-->
<!--                    <span class="text-muted">CONVERSION RATE</span>-->
<!--                  </p>-->
<!--                </div>-->
<!--                &lt;!&ndash; /.d-flex &ndash;&gt;-->
<!--                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">-->
<!--                  <p class="text-warning text-xl">-->
<!--                    <i class="ion ion-ios-cart-outline"></i>-->
<!--                  </p>-->
<!--                  <p class="d-flex flex-column text-right">-->
<!--                                            <span class="font-weight-bold">-->
<!--                                               <i class="ion ion-android-arrow-up text-warning"></i> 0.8%-->
<!--                                            </span>-->
<!--                    <span class="text-muted">SALES RATE</span>-->
<!--                  </p>-->
<!--                </div>-->
<!--                &lt;!&ndash; /.d-flex &ndash;&gt;-->
<!--                <div class="d-flex justify-content-between align-items-center mb-0">-->
<!--                  <p class="text-danger text-xl">-->
<!--                    <i class="ion ion-ios-people-outline"></i>-->
<!--                  </p>-->
<!--                  <p class="d-flex flex-column text-right">-->
<!--                                            <span class="font-weight-bold">-->
<!--                                              <i class="ion ion-android-arrow-down text-danger"></i> 1%-->
<!--                                            </span>-->
<!--                    <span class="text-muted">REGISTRATION RATE</span>-->
<!--                  </p>-->
<!--                </div>-->
<!--                &lt;!&ndash; /.d-flex &ndash;&gt;-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <!-- /.col-md-6 -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </div>
    <!-- /.content -->
    <!-- /.主题内容正文结束 -->
  </div>
  <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<!--<script src="plugins/chart.js/Chart.min.js"></script>-->

<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<script src="./echars/echarts.js"></script>
</body>
<script th:inline="javascript">



  var app = {};

  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;


  var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
  ];

  app.configParameters = {
    rotate: {
      min: -90,
      max: 90
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right'
      }
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom'
      }
    },
    position: {
      options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {})
    },
    distance: {
      min: 0,
      max: 10000
    }
  };

  app.config = {
    rotate: 30,
    align: 'right',
    verticalAlign: 'middle',
    position: 'bottom',
    distance: 27,
    onChange: function () {
      var labelOption = {
        normal: {
          rotate: app.config.rotate,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          position: app.config.position,
          distance: app.config.distance
        }
      };
      myChart.setOption({
        series: [{
          label: labelOption
        }, {
          label: labelOption
        }, {
          label: labelOption
        }, {
          label: labelOption
        }]
      });
    }
  };


  var labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {
      }
    }
  };

  option = {
    title:{
      text: '月能耗消耗量',//主标题
      itemGap: 10,//主副标题间距
      top: 20,//主副标题的垂直位置
      left: "center",
      padding: 2,//标题内边距,
      itemGap: 2,//主副标题间距
      textStyle: {//主标题的属性
        color: '#000000',//颜色
        fontSize: 22,//大小
        fontWeight: '700',//粗细
        fontFamily: 'monospace',//字体
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['电力', '煤炭', '天然气', '燃料油','水量']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {show: false},
        data: ['1月', '2月','3月', '4月','5月','6月', '7月', '8月', '9月', '10月', '11月', '12月' ]
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 1,
        max: 10000

      }
    ],
    series: [
      {
        name: '电力',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [8200, 8320, 8010, 8340, 8900,8400,8100,8120,8560,8450,8590,8650]
      },
      {
        name: '煤炭',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [6200, 6820, 6910, 6340, 6900,6920,6950,6940,6890,6940,6860,6760]
      },{
        name: '天然气',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [4200, 4820, 4910, 4340,4900,4850,4680,4750,4450,4690,4890,4960]
      },
      {
        name: '燃料油',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [2500, 2320, 2010, 2540, 2900,2450,2540,2650,2560,2950,2590,2780]
      },
      {
        name: '水量',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: [980, 770, 1010, 990, 400,600,560,570,750,850,950,870]
      }
    ]
  };

  option && myChart.setOption(option);


  var app2 = {};

  var chartDom2 = document.getElementById('main1');
  var myChart2 = echarts.init(chartDom2);
  var option2;


  var posList2 = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
  ];

  app2.configParameters = {
    rotate: {
      min: -90,
      max: 90
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right'
      }
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom'
      }
    },
    position: {
      options: posList2.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {})
    },
    distance: {
      min: 0,
      max: 100
    }
  };

  app2.config = {
    rotate: 30,
    align: 'right',
    verticalAlign: 'middle',
    position: 'bottom',
    distance: 27,
    onChange: function () {
      var labelOption = {
        normal: {
          rotate: app2.config.rotate,
          align: app2.config.align,
          verticalAlign: app2.config.verticalAlign,
          position: app2.config.position,
          distance: app2.config.distance
        }
      };
      myChart2.setOption({
        series: [{
          label: labelOption
        }, {
          label: labelOption
        }, {
          label: labelOption
        }, {
          label: labelOption
        }]
      });
    }
  };


  var labelOption2 = {
    show: true,
    position: app2.config.position,
    distance: app2.config.distance,
    align: app2.config.align,
    verticalAlign: app2.config.verticalAlign,
    rotate: app2.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {
      }
    }
  };

  option2 = {
    title: {
      text: '年能耗消耗量',//主标题
      itemGap: 2,//主副标题间距
      top: 8,//主副标题的垂直位置
      left: "center",
      padding: 20,//标题内边距,
      textStyle: {//主标题的属性
        color: '#000000',//颜色
        fontSize: 22,//大小
        fontWeight: '700',//粗细
        fontFamily: 'monospace',//字体
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['电力', '煤炭', '天然气', '燃料油','水量']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {show: false},
        data: ['2020年', '2021年', '2022年', '2023年', '2024年', '2025年']
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 1,
        max: 20000
      }
    ],
    series: [
      {
        name: '电力',
        type: 'bar',
        barGap: 0,
        label: labelOption2,
        emphasis: {
          focus: 'series'
        },
        data: [9200, 9320, 9010, 9340, 9900,9950]
      },
      {
        name: '煤炭',
        type: 'bar',
        label: labelOption2,
        emphasis: {
          focus: 'series'
        },
        data: [7200, 7820, 7910, 7340, 7900,7890]
      },
      {
        name: '天然气',
        type: 'bar',
        label: labelOption2,
        emphasis: {
          focus: 'series'
        },
        data: [5500, 5320, 5010, 5540, 5900,5000]
      },
      {
        name: '燃料油',
        type: 'bar',
        label: labelOption2,
        emphasis: {
          focus: 'series'
        },
        data: [3800, 3700, 3010, 3900, 3000,3500]
      },
      {
        name: '水量',
        type: 'bar',
        label: labelOption2,
        emphasis: {
          focus: 'series'
        },
        data: [2700, 1400, 1210, 2100, 1500,1900]
      }
    ]
  };

  option2 && myChart2.setOption(option2);

  // 先填充产品select
  // 获取用户登录的角色id
  const role_id = /*[[${#httpSession.getAttribute('role_id')}]]*/{};
  const user_id = /*[[${#httpSession.getAttribute('user_id')}]]*/{};
  if (role_id == 1){
    $.ajax({
      url: '/product/product/all',
      type: 'get',
      dateType: 'json',
      contentType: 'application/json',
      success: function (data) {
        // 取用户下拉框
        var select = document.getElementById("product_id");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for(var i = arr_option.length - 1; i >= 0;i--){
          arr_option.remove(i);
        }
          if (data.statusCode == 200) {
          // 取到list数据集合
          var list = data.list;
          var option1 = document.createElement('option');
            option1.innerHTML = '下拉选择查看的产品';
          // 添加到select中
          select.append(option1);
          // forEach遍历
          list.forEach(function (item) {
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.productName;
            // 添加到select中
            select.append(option);
          })
        }
      }
    })

  } else {

    $.ajax({
      url: '/product/product/all/' + user_id,
      type: 'get',
      dateType: 'json',
      contentType: 'application/json',
      success: function (data) {
        // 取用户下拉框
        var select = document.getElementById("product_id");
        // 情况下拉框中的option
        var arr_option = select.options;
        // 先清除在添加
        for(var i = arr_option.length - 1; i >= 0;i--){
          arr_option.remove(i);
        }
        if (data.statusCode == 200) {
          // 取到list数据集合
          var list = data.list;
          var option1 = document.createElement('option');
          option1.innerHTML = '下拉选择查看的产品';
          // 添加到select中
          select.append(option1);
          // forEach遍历
          list.forEach(function (item) {
            // 创建select中的option
            var option = document.createElement('option');
            // 赋值用户id给value
            option.value = item.id;
            // 赋值用户名给内容
            option.innerHTML = item.productName;
            // 添加到select中
            select.append(option);
          })
        }
      }
    })
  }



  $(function(){
    var year_arr = [];
    var data_arr1 = [];
    var data_arr2 = [];
    var data_arr3 = [];
    var data_arr4 = [];
    var data_arr5 = [];
    $("#product_id").change(function() {
      // 获取用户登录的角色id
      // const role_id = /*[[${#httpSession.getAttribute('role_id')}]]*/{};
      var product_id = $("#product_id").val();

      // 管理员查看所有的产品
      $.ajax({
        url: '/yeg/yearenergy/productid/' + product_id,
        type: 'get',
        dateType: 'json',
        contentType: 'application/json',
        // data: '',
        success: function (data) {
          var select = document.getElementById('year_id');
          // 情况下拉框中的option
          var arr_option = select.options;
          // 先清除在添加
          for(var i = arr_option.length - 1; i >= 0;i--){
            arr_option.remove(i);
          }
          if (data.statusCode == 200) {
            // 取到list数据集合
            var list = data.list;
            var option1 = document.createElement('option');
            option1.innerHTML = '下拉选择年';
            select.append(option1);
            list.forEach(function(item){
              var option = document.createElement('option');
              option.innerHTML = item.year;
              option.value = item.id;
              select.append(option);
            })


            option2.xAxis[0].data= year_arr;
            // 填充echars 参数
            for(var i = 0; i<list.length ;i++){

              option2.series[0].data = data_arr1;
              option2.series[1].data = data_arr2;
              option2.series[2].data = data_arr3;
              option2.series[3].data = data_arr4;
              option2.series[4].data = data_arr5;
              option2.xAxis[0].data[i] = list[i].year +"年";
              option2.series[0].data[i] = list[i].yearElectricityConsume;
              option2.series[1].data[i] = list[i].yearCoalConsume;
              option2.series[2].data[i] = list[i].yearNaturalgasConsume;
              option2.series[3].data[i] = list[i].yearFueloilConsume;
              option2.series[4].data[i] = list[i].yearWaterConsume;

            }
            option2.yAxis[0].max = data.object;
            myChart2.setOption(option2);
          } else {
            alert(data.errorMsg)
          }
        }
      })

    })



    var data_arr11 = [];
    var data_arr22 = [];
    var data_arr33 = [];
    var data_arr44 = [];
    var data_arr55 = [];
    var month_arr = [];
    $("#year_id").change(function (event){


      var year = $("#year_id").find("option:selected").text();
      var product_id = $("#product_id").val();
      if(year == undefined || year == null || year =="" || isNaN(year)){
        alert("请选择年")
        return;
      }
      if(product_id == undefined || product_id == null || product_id ==""){
        alert("请选择产品")
        return;
      }

      $.ajax({
        url: '/eny/energy/year/' + product_id+"/"+year,
        type: 'get',
        dateType: 'json',
        contentType: 'application/json',
        success: function (data) {

          if(data.statusCode == 200){
            // 取到list数据集合
            var list = data.list;

            option.series[0].data = data_arr11;
            option.series[1].data = data_arr22;
            option.series[2].data = data_arr33;
            option.series[3].data = data_arr44;
            option.series[4].data = data_arr55;
            option.xAxis[0].data = month_arr;
            for(var i = 0;i<list.length;i++){

              var datee = new Date(list[i].productTime);
              var month  = datee.getMonth()+1;

              option.xAxis[0].data[i] = ""+month +"月";
              option.series[0].data[i] = list[i].productMonthElectricity;
              option.series[1].data[i] = list[i].productMonthCoal;
              option.series[2].data[i] = list[i].productMonthNaturalgas;
              option.series[3].data[i] = list[i].productMonthFueloil;
              option.series[4].data[i] = list[i].productMonthWater;
            }
            myChart.setOption(option);

          }else {
            alert(data.errorMsg)
          }
        }
      })

    })

  })




</script>

</html>
